<template>
  <div>
    <div class="center-w">
      <div style="overflow-y: scroll;height: 85vh;">
        <el-card
          style="margin-bottom: 10px;"
          shadow="always"
          :body-style="{ padding: '20px' }"
        >
          <div class="formItem" style="flex-wrap: wrap;">
            <div class="formItem" style="width: 167px;">
              <el-input
                placeholder="订单编号"
                v-model="formData.OrderNumber"
                clearable
                size="mini"
                @input="search"
              >
              </el-input>
            </div>
            <div class="formItem" style="width: 167px;">
              <el-input
                placeholder="发票号"
                v-model="formData.InvoiceNo"
                clearable
                size="mini"
                @input="search"
              >
              </el-input>
            </div>
            <div class="formItem" style="width: 167px;">
              <el-input
                placeholder="发票抬头"
                v-model="formData.InvoiceTitle"
                clearable
                size="mini"
                @input="search"
              >
              </el-input>
            </div>
            <div class="formItem">
              <span style="font-size: 12px;">是否开票：</span>
              <el-select
                size="mini"
                v-model="formData.IsInvoice"
                placeholder="请选择"
                style="width:100px"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <div class="formItem" style="margin-left: 10px;">
              <span style="font-size: 12px;">申请时间：</span>
              <el-date-picker
                v-model="formData.applyDate"
                type="daterange"
                size="mini"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 200px;"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
            <div class="formItem" style="margin-left: 10px;">
              <span style="font-size: 12px;">开票时间：</span>
              <el-date-picker
                v-model="formData.invoiceDate"
                type="daterange"
                size="mini"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 200px;"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
            <div class="formItem">
              <el-button
                style="margin-left: 20px;"
                type="primary"
                size="mini"
                @click="search"
                >查询</el-button
              >
              <el-button type="success" size="mini" @click="clearForm"
                >清空</el-button
              >
              <el-button type="danger" size="mini" @click="exportHandle"
                >导出</el-button
              >
            </div>
          </div>
        </el-card>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <el-table
            size="small"
            :data="tableData"
            @selection-change="selectChange"
            :row-key="getRowId"
          >
            <el-table-column
              :reserve-selection="true"
              type="selection"
              width="50"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label="订单编号"
            >
              <template slot-scope="scope">
                <div class="clickable" @click="showOrder(scope.row)">
                  {{ scope.row.orderNumber || "/" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label="开票金额"
            >
              <template slot-scope="scope">
                <span style="color: #FF0B0B;">{{
                  scope.row.amount || "/"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="发票抬头">
              <template slot-scope="scope">
                <div>{{ scope.row.invoiceTitle || "/" }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="收票联系人">
              <template slot-scope="scope">
                <div class="clickable" @click="showCollect(scope.row)">
                  {{ scope.row.collectBy || "/" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="申请时间">
              <template slot-scope="scope">
                <span>{{ scope.row.createAt }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="发票号">
              <template slot-scope="scope">
                <span>{{ scope.row.invoiceNo }}</span>
              </template>
            </el-table-column>

            <el-table-column
              show-overflow-tooltip
              align="center"
              label="货运号"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.freightNo || "/" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              label="开票时间"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.openInvoiceAt || "/" }}</span>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="是否开票"
            >
              <template slot-scope="scope">
                <el-switch
                  size=""
                  @change="setDefultRole(scope.row)"
                  v-model="scope.row.stateFlage"
                ></el-switch>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <!-- 分页组件 -->
      <Pagination
        v-bind:child-msg="formData"
        @callFather="callFather"
      ></Pagination>
    </div>

    <!-- 发票详情 -->
    <el-dialog title="发票详情" width="40%" :visible.sync="invoiceVisible">
      <div class="detail_container">
        <div class="detail_item">
          <div class="content">
            <div class="item_title">订单编号：</div>
            <div class="item_info">{{ detailInfo.orderNumber }}</div>
          </div>
          <div class="content">
            <div class="item_title">开票金额：</div>
            <div class="item_info" style="color: #FF0000;">{{ detailInfo.amount }}</div>
          </div>
        </div>
        <div class="detail_item">
          <div class="content">
            <div class="item_title">申请时间：</div>
            <div class="item_info">{{ detailInfo.createAt }}</div>
          </div>
        </div>
        <div class="detail_item">
          <div class="content">
            <div class="item_title">发票抬头：</div>
            <div class="item_info">{{ detailInfo.invoiceTitle }}</div>
          </div>
        </div>
        <div class="detail_item">
          <div class="content">
            <div class="item_title">税号：</div>
            <div class="item_info">{{ detailInfo.dutyNumber }}</div>
          </div>
        </div>
        <div class="detail_item">
          <div class="content">
            <div class="item_title">开户银行：</div>
            <div class="item_info">{{ detailInfo.openBank }}</div>
          </div>
        </div>
        <div class="detail_item">
          <div class="content">
            <div class="item_title">银行账号：</div>
            <div class="item_info">{{ detailInfo.bankNumber }}</div>
          </div>
        </div>
        <div class="detail_item">
          <div class="content">
            <div class="item_title">公司地址：</div>
            <div class="item_info">{{ detailInfo.companyAddress }}</div>
          </div>
        </div>
        <div class="detail_item">
          <div class="content">
            <div class="item_title">公司电话：</div>
            <div class="item_info">{{ detailInfo.companyPhone }}</div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 收票详情 -->
    <el-dialog title="收票详情" width="40%" :visible.sync="collectVisible">
      <div class="detail_container">
        <div class="detail_item">
          <div class="content">
            <div class="item_title" style="width: 100px;">收票联系人：</div>
            <div class="item_info">{{ invoiceInfo.collectBy }}</div>
          </div>
        </div>
        <div class="detail_item">
          <div class="content">
            <div class="item_title" style="width: 100px;">联系电话：</div>
            <div class="item_info">{{ invoiceInfo.collectPhone }}</div>
          </div>
        </div>
        <div class="detail_item">
          <div class="content">
            <div class="item_title" style="width: 100px;">收票地址：</div>
            <div class="item_info">{{ invoiceInfo.collectAddress }}</div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 开票信息 -->
    <el-dialog title="开票信息" width="40%" :visible.sync="makeVisible">
      <div class="detail_container">
        <div class="detail_item">
          <div class="content">
            <div class="item_title">发票号：</div>
            <div class="item_info">
              <el-input
                v-model="makeData.invoiceNo"
                placeholder="请输入发票单号"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="detail_item">
          <div class="content">
            <div class="item_title">货运号：</div>
            <div class="item_info">
              <el-input
                v-model="makeData.freightNo"
                placeholder="请输入货运单号"
              ></el-input>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="makeVisible = false">取 消</el-button>
        <el-button type="primary" @click="makeHandle"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
import { getInvoiceList,fullInvoiceInfo } from "../../api/invoice";

export default {
  data() {
    return {
      makeData: {
        invoiceNo: "",
        freightNo: ""
      },
      invoiceDate: {
        number: "23040701"
      },
      collectData: {
        username: "罗大佑",
        phone: "13243838466",
        address: "广东省罗湖区罗湖投资控股大厦"
      },
      currentId:null,
      tableData: [],
      userInfo: {},
      loading: false,
      userForm: {},
      tags: "",
      invoiceVisible: false,
      collectVisible: false,
      makeVisible: false,
      userValue: "",
      formData: {
        PageIndex: 1,
        Size: 10,
        total: 0,
        OrderNumber:"",
        InvoiceNo: "",
        InvoiceTitle: "",
        IsInvoice: null,
        applyDate: "",
        invoiceDate: ""
      },
      detailInfo:{},
      invoiceInfo:{},
      options: [
        {
          id: true,
          name: "是"
        },
        {
          id: false,
          name: "否"
        }
      ],
      tagData: [],
      currntTagList: [],
      dingList: []
    };
  },
  components: {
    Pagination
  },

  created() {
    this.getList();
  },

  methods: {
    
    //搜索
    search() {
      this.formData.PageIndex = 1;
      this.getList();
    },

    //获取列表数据
    async getList() {
      let list = {
        PageIndex: this.formData.PageIndex,
        Size: this.formData.Size,
        OrderNumber:this.formData.OrderNumber,
        InvoiceNo: this.formData.InvoiceNo,
        InvoiceTitle: this.formData.InvoiceTitle,
        IsInvoice: this.formData.IsInvoice,
        CreateAtBegin:this.formData.applyDate[0],
        CreateAtEnd: this.formData.applyDate[1],
        OpenInvoiceAtBegin: this.formData.invoiceDate[0],
        OpenInvoiceAtEnd: this.formData.invoiceDate[1],
      }
      let res = await getInvoiceList(list);
      if (res.data) {
        const { items, totalCount } = res.data;
        this.formData.total = totalCount;
        this.tableData = items;
        this.tableData.forEach(item => { 
          if(item.state == 1){
            item.stateFlage = true
          }else{
            item.stateFlage = false
          }
        })
      } else {
        this.tableData = [];
      }
    },

    // 确定开票
    async makeHandle(){
      let obj = {
        id: this.currentId,
        invoiceNo: this.makeData.invoiceNo,
        freightNo: this.makeData.freightNo
      }
      const res = await fullInvoiceInfo(obj)
      if(res.data){
        this.makeVisible = false
        this.getList()
      }
    },

    // 发票
    showOrder(val) {
      this.invoiceVisible = true;
      this.detailInfo = val;
    },

    // 收票详情
    showCollect(val) {
      this.collectVisible = true;
      this.invoiceInfo = val
    },

    // 是否开票
    setDefultRole(val){
      if(!val.state){
        this.makeVisible = true
        this.currentId = val.id
      }else{
        val.stateFlag = true
      }
    },

    // 选择复选框事件
    selectChange(val) {
    },

    // row-key绑定的必须为唯一值
    getRowId(row) {
      return row.orderId;
    },

    //清空列表
    clearForm() {
      this.formData = {
        PageIndex: 1,
        Size: 10,
        total: 0,
        OrderNumber:"",
        InvoiceNo: "",
        InvoiceTitle: "",
        IsInvoice: null,
        applyDate: "",
        invoiceDate: ""
      };
      this.getList();
    },

    // 导出
    exportHandle() {},

    // 分页插件事件
    callFather(parm) {
      this.formData.PageIndex = parm.pageIndex;
      this.formData.Size = parm.size;
      this.getList(this.formData);
    },

  }
};
</script>

<style lang="less" scoped>
.center-w {
  display: flex;
  /* align-items: center; */
  flex-direction: column;
  background-color: #fff;
  height: 82vh;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 20px;
}
.formItem {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.clickable {
  cursor: pointer;
  color: #409eff;
}
.detail_container {
  width: 80%;
  margin: 0 auto;
  .detail_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    .content {
      display: flex;
      align-items: center;
    }
    .item_title {
      width: 80px;
      color: rgb(69, 69, 69);
      font-family: 思源黑体;
      font-size: 16px;
      font-weight: 400;
    }
    .item_info {
      color: rgb(69, 69, 69);
      font-family: 思源黑体;
      font-size: 16px;
      font-weight: 400;
      margin-left: 20px;
    }
  }
}
.center-w .el-input {
  max-width: 200px;
  margin-right: 30px;
}

.title {
  color: rgba(16, 16, 16, 1);
  font-size: 20px;
  margin-bottom: 20px;
}

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.head-img {
  /* border-radius: 50%; */
  width: 32px;
  height: 32px;
}
</style>
